import React, { useState } from "react";
import { Tooltip, Icon, Drawer, Form, Radio } from "antd";
import ActionGroup from "./actionGroup/actionGroup";
import DrawerForm from "./contentDrawerForm/contentDrawerForm";
import { statusStyle } from "../../helper/const";
import { formatTime, strToArr} from "../../helper/utils";
import { CSSPrefix } from "../../../../helps/utils";


const PageCoverContent = (props) => {
  // const {contentList}=props||{};
  const contentList = [
    {
      id: 2, //id
      gmtCreate: 1723455727000, //创建时间
      gmtModified: 1723455727000, //修改时间
      creator: "pjmike.pj", //更新人
      modifier: "pjmike.pj", //修改人
      code: "7chG7j", //内容code
      name: "ce's", //内容名称
      decription: "内容描述", // 内容描述
      status: "online", //状态  edit-搭建中, audit_pass 审核通过，audit 审核中
      type: "report", //内容类型 （报告 or 消息）
      category: "2", // 内容分类
      categoryName: "TP新签", //内容分类名称
      gmtStartTime: 1723452732000, //有效期开始时间
      gmtEndTime: 1723452732000, //有效期结束时间
      isPublic: "y", //是否公开
    },
  ];
  const [visible, setVisible] = useState(false);

  const handelCloseDrawer = () => {
    setVisible(false);
  };

  const handelOpenDrawer = () => {
    setVisible(true);
  };
  const typeImgList = [
    {
      mainTitle: "报告页面",
      mainDescription: "是否需要一句话来描述",
      backgroundImage:
        "linear-gradient(-71deg, rgba(205, 230, 255, 0.43) 0%, #A7D2FF 100%)",
      mainLogo:
        "https://img.alicdn.com/imgextra/i1/O1CN0124YcbE1ycOch3b2id_!!6000000006599-2-tps-216-200.png",
    }
  ];
  return (
    <div className="page-cover-content">
      <div
        className="page-cover-set page-cover-item"
        onClick={handelOpenDrawer}
      >
        <img
          src="https://img.alicdn.com/imgextra/i4/O1CN01XMvntd1Vq1Y3t5De0_!!6000000002703-2-tps-500-850.png"
          alt=""
          className="page-cover-img"
        />
      </div>
      {contentList.map((item, index) => {
        const {
          name: contentName,
          id: contentId,
          type: contentType,
          creator: author,
          authorId = "32323",
          gmtModified,
          categoryName,
          decription = "",
          status: contentStatus,
          gmtEndTime: shareTime,
        } = item || {};
        return (
          <div className="page-cover-item">
            <div className="cover-item-main">
              <div
                className="page-cover-status"
                style={{
                  backgroundColor:
                    statusStyle[contentStatus]?.background || "red",
                }}
              >
                {statusStyle[contentStatus]?.statusText || "未知"}
              </div>
              <div className="page-cover-company-box">
                <div className="cover-company-name long-text">
                  {contentName}
                </div>
                <div className="cover-company-details">
                  <div className="company-detail-message long-text">
                    <div className="company-detail-label">ID:</div>
                    <div className="company-detail-value long-text">
                      {contentId}
                    </div>
                  </div>
                  <div className="company-detail-message long-text">
                    <div className="company-detail-label">类型:</div>
                    <div className="company-detail-value long-text">
                      {contentType}
                    </div>
                  </div>
                </div>

                <img
                  src="https://img.alicdn.com/imgextra/i3/O1CN01ha55IA29EXlZqSZny_!!6000000008036-2-tps-242-200.png"
                  alt=""
                  className="item-fixed-img"
                />
              </div>
              <div className="page-share-time">
                分享有效期至: {formatTime(shareTime, "YYYY-MM-DD")}
              </div>
            </div>
            {categoryName && (
              <div className="cover-label-box">
                {strToArr(categoryName).map((item, index) => {
                  return <div className="cover-label-item">{item}</div>;
                })}
              </div>
            )}
            {decription && (
              <div className="page-cover-description-box">
                <div className="page-cover-description ">{decription}</div>
              </div>
            )}

            <div className="page-author-box">
              {" "}
              <div className="author-message-detail long-text">
                {author}+{authorId}
              </div>
              <div className="page-create-time long-text">
                发布时间: {formatTime(gmtModified, "YYYY-MM-DD")}
              </div>
            </div>

            <div className="cover-operation-box">
              <ActionGroup contentStatus={contentStatus}></ActionGroup>
            </div>
          </div>
        );
      })}
      <Drawer
        title={`创建内容`}
        placement="right"
        className={`${CSSPrefix}-content-drawer`}
        width={600}
        closable
        onClose={handelCloseDrawer}
        visible={visible}
      >
        <div className="content-drawer-form">
          <div className="item-drawer-form-title">内容选择（必选）</div>
          <div className="item-drawer-form-content type-img-select">
            {typeImgList.map((item, index) => {
              const {
                mainTitle,
                mainDescription,
                mainLogo,
                backgroundImage,
                defaultNoneDescription,
                defaultNoneTilte,
                fontColor,
              } = item || {};
              return (
                <div className="type-img-item" style={{ backgroundImage }}>
                  <div className="type-img-left">
                    {mainTitle && (
                      <>
                        <div className="type-img-main-title">{mainTitle}</div>
                        <div className="type-img-main-description">
                          {mainDescription}
                        </div>
                      </>
                    )}
                    {defaultNoneTilte && (
                      <>
                        <div className="none-img-default-title">
                          {defaultNoneTilte}
                        </div>
                        <div className="none-img-default-description">
                          {defaultNoneDescription}
                        </div>
                      </>
                    )}
                  </div>
                  <img src={mainLogo} alt="" className="type-img-right" />
                  <img
                    src={
                      "https://img.alicdn.com/imgextra/i2/O1CN01bW40KH1KFQ7jreLdD_!!6000000001134-2-tps-48-48.png"
                    }
                    alt=""
                    className="type-img-selected"
                  />
                </div>
              );
            })}
            <div className="type-img-item result-img-item">
              <div className="type-img-left">
                <div className="none-img-default-title">开发中</div>
                <div className="none-img-default-description">
                  敬请期待。。。
                </div>
              </div>
              <img
                src="https://img.alicdn.com/imgextra/i1/O1CN01AINP2d1wmM096SQD8_!!6000000006350-2-tps-289-200.png"
                alt=""
                className="type-img-right default-img-right"
              />
              <img
                src={
                  "https://img.alicdn.com/imgextra/i2/O1CN01bW40KH1KFQ7jreLdD_!!6000000001134-2-tps-48-48.png"
                }
                alt=""
                className="type-img-selected"
              />
            </div>
          </div>
        </div>
        <DrawerForm></DrawerForm>
      </Drawer>
    </div>
  );
};

export default PageCoverContent;
